<template>
  <div id="content-card">
    <ul v-if="isEmpty" @click="goToDetail" class="card-list mtop-10">
      <li
        class="card-item"
        v-for="item in dataList"
        :key="item.id"
      >
        <CardItem
          :itemId="item.id"
          :cardImg="pic300(item)"
          :playCount="item.playCount || item.playcount"
        />
        <div class="text-hidden">
          <span :title="item.name">
            {{ item.name }}
          </span>
        </div>
        <!-- 专辑人名字 -->
        <template>
          <slot :item="item.artist"></slot>
        </template>
      </li>
    </ul>
    <!-- 空状态 -->
    <Empty v-else />
    <!-- 分页 -->
    <a-pagination
      :current="current"
      :total="total"
      hideOnSinglePage
      show-less-items
      @change="changePage"
    />
  </div>
</template>

<script>
import { Pagination } from 'ant-design-vue';
import CardItem from './cardItem';
import Empty from '@/components/Library/Empty';
import infiniteScroll from 'vue-infinite-scroll';

export default {
  name: 'ContentCard',

  directives: { infiniteScroll },

  components: {
    Empty,
    CardItem,
    APagination: Pagination
  },

  data() {
    return {
      // 总数
      total: 0,
      // 当前为第几页
      current: 1,
      show: false
    };
  },

  props: {
    dataList: {
      type: Array,
      default() {
        return []
      }
    },
    dataTotal: {
      type: Number,
      default() {
        return 0;
      }
    }
  },

  computed: {
    isEmpty() {
      return this.dataList && this.dataList.length;
    }
  },

  watch: {
    dataTotal: {
      handler(value) {
        this.total = value;
      },
      immediate: true,
      // deep: true
    }
  },

  methods: {
    // 分页
    changePage(page, pageSize) {
      this.current = page;
      this.$emit('pageInfo', {
        page,
        pageSize
      })
    },
    // 根据路由判断渲染的图片
    pic300(item) {
      switch (this.$route.name) {
        case 'recommendation':
        case 'newsongs':
        case 'artistdetail':
          return `${item.picUrl}?param=300y300`;
        case 'songmenu':
        case 'ranklist':
        case 'userdetail':
          // 对图片地址进行判断，不然会报错
          return `${item.coverImgUrl ? item.coverImgUrl : ''}?param=300y300`;
        case 'singer':
          return `${item.img1v1Url}?param=300y300`;
      }
    },
    // 鼠标移入移除事件
    // mouseenter(event) {
    //   console.log(event);
    // },
    // 点击跳转至歌单详情页
    goToDetail(event) {
      console.log(event);
      const { detailid } = event.target.dataset;
      if (detailid) {
        this.$emit('goDetail', detailid);
      }
    }
  },

  mounted() {
    this.$eventBus.$on('clickTag', () => {
      this.current = 1;
    });
  },

  beforeDestroy() {
    this.$eventBus.$off('clickTag');
  }
};
</script>

<style lang="less" scoped>
@import '../../../styles/common.css';
#content-card {
  position: relative;
  .card-list {
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-around;
    align-items: center;
    .card-item {
      width: 18%;
      margin-bottom: 20px;
      margin-right: 2%;
      // .card-img {
      //   position: relative;
      //   margin-bottom: 5px;
      //   img {
      //     border: 1px solid #e6e6ee;
      //   }
      //   .play-amount {
      //     position: absolute;
      //     top: 10px;
      //     right: 10px;
      //     color: #fff;
      //     span {
      //       text-shadow: 0 0 3px #2c3e50;
      //     }
      //   }
      //   .play-btn {
      //     display: flex;
      //     justify-content: center;
      //     align-items: center;
      //     width: 32px;
      //     height: 32px;
      //     position: absolute;
      //     right: 10px;
      //     bottom: 10px;
      //     background-color: #fbf7f6;
      //     color: #ec4141;
      //     border-radius: 50%;
      //   }
      // }
    }
  }
  /deep/ul.ant-pagination {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>